import { List, Image, Ellipsis, InfiniteScroll, Space } from 'antd-mobile'
import Link from 'next/link'
import router from 'next/router'
import React, { useState } from 'react'
import timeConvert from '../../../libs/timeConvert'
import { judgeLoad } from '../../../libs/utils'
import { Relevance } from '../../../models/enums'
import { IDynamic } from '../../../models/types'
import Empty from '../../Empty'

import styles from './style.module.scss'

interface Props {
  dylist: IDynamic[],
  hasMore: boolean
  getDylist: (skip: number) => void
}

function dealText(type: Relevance) {
  if (type === Relevance.Myfocus) return '关注了'
  if (type === Relevance.Mythumb) return '点赞了'
  if (type === Relevance.Myissue) return '发布了'
  if (type === Relevance.Goumai) return '购买了'
  if (type === Relevance.Maichu) return '卖出了'
  if (type === Relevance.Remark) return '发布了'
  if (type === Relevance.likeRemark) return '点赞了这条'
}

const Dynamic = ({ dylist, getDylist, hasMore }: Props) => {

  return (
    <List header='动态'>
      {
        dylist.map((item, idx) => {
          if (item.type === Relevance.Myfocus) return (
            <List.Item
              key={idx}
              arrow={false}
              onClick={() => router.push('/user/' + item.dynamic._id + '/dynamic')}
              title={<Space>
                {'在 ' + timeConvert(item.createAt)}
                {`${dealText(item.type)}${item.dynamic.nickname}`}
              </Space>}
              extra={
                <Image alt='' src={item.dynamic.avatar} fit='cover'
                  style={{ borderRadius: 50 }}
                  width={50} height={50} />
              }
              description={<>签名: {item.dynamic.signature}</>}
            >
              我{`${dealText(item.type)}${item.dynamic.nickname}`}
            </List.Item>
          )
          else if (
            item.type === Relevance.Remark ||
            item.type === Relevance.likeRemark
          ) return (
            <List.Item
              key={idx}
              arrow={false}
              onClick={() => router.push('/goods/' + item.dynamic.bookId)}
              title={<Space>
                {'在 ' + timeConvert(item.createAt)}
                {`我${dealText(item.type)}评论`}
              </Space>}
            >
              {item.dynamic.content}
            </List.Item>
          )
          else return (
            <List.Item
              key={idx}
              arrow={false}
              onClick={() => router.push('/goods/' + item.dynamic._id)}
              title={<Space>
                {'在 ' + timeConvert(item.createAt)}
                {`${dealText(item.type)}书籍`}
              </Space>}
              extra={
                <Image alt='' src={item.dynamic.banner[0]} fit='cover'
                  width={45} height={60} />
              }
              description={
                <Ellipsis direction='end' rows={2} content={'简介: ' + item.dynamic.content} />
              }
            >
              {item.dynamic.title}
            </List.Item>
          )
        })
      }
      {dylist.length === 0 && <Empty />}
      {
        !judgeLoad(dylist, hasMore) &&
        <InfiniteScroll
          loadMore={async () => getDylist(dylist.length)}
          hasMore={hasMore}
        />
      }
    </List>
  )
}

export default Dynamic
